<template>
	<div class="box">
		<div class="toolPicBox">
			<slot name="img"></slot>
		</div>
		<div class="dataBox">
			<span class="title">{{title}}</span>
			<span class="data">
				<number-grow :value="data"></number-grow>
			</span>
		</div>
	</div>
</template>

<script>
	import numberGrow from '../../../components/NumberGrow/index.vue'
	export default {
		name: 'DataTool',
		components: {
			numberGrow
		},
		props: {
			title: {
				type: String,
				default: '标题'
			},
			data: {
				type: Number,
				default: 0
			},
			src: {
				type: String
			},
		}
	}
</script>

<style scoped>
	.box {
		display: flex;
		width: calc(100% - 40px);
		height: calc(100% - 40px);
		margin: 20px;
		border-radius: 10px;
		transition: all .1s linear;
	}

	.box:hover{
		background-color: #f3f3f3;
	}

	.dataBox {
		flex: 1;
		height: 140px;
		display: flex;
		flex-direction: column;
		justify-content: center;
		text-align: center;
	}

	.toolPicBox {
		width: 50%;
		height: 140px;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.title {
		font-size: 27px;
		font-weight: 800;
		margin-bottom: 10px;
	}

	.data {
		font-size: 35px;
		color: #1890FF;
	}
</style>
